<template>
  <div class="mg-lg" v-loading="loading">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="{}"
      hide-required-asterisk
    >
      <c-main-template
        minHeight="auto"
        title="订单信息"
        :isBreadcrumb="false"
        v-if="ruleForm.buyerOrderList"
      >
        <div class="mt-lg ml-lg mr-lg">
          <el-row>
            <el-col :span="8">
              <el-form-item label="订单号：">
                {{ ruleForm.buyerOrderList.id }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="订单总金额：">
                <span>{{ ruleForm.buyerOrderList.productCurrency }}</span>
                <span class="ml-sm">{{
                  filters.thousands(ruleForm.buyerOrderList.productSumPrice)
                }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="下单时间：">
                {{
                  filters.dateYMDHMSFormat(ruleForm.buyerOrderList.timeCreate)
                }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="付汇方式：">
                {{ ruleForm.buyerOrderList.payMode }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="成交方式：">
                {{ ruleForm.buyerOrderList.tradeMode }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="运输方式：">海运 </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="启运港：">
                {{ ruleForm.startHarbor.harbor }}
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </c-main-template>

      <c-main-template
        class="mt-lg"
        minHeight="auto"
        title="车辆信息"
        :isBreadcrumb="false"
      >
        <div class="mg-lg">
          <c-table-template :data="ruleForm.carList" border>
            <el-table-column label="车辆信息" align="center">
              <template #default="scope">
                <span v-for="(item, index) in k" :key="index">
                  {{ scope.row[item] }}&nbsp;
                </span>
              </template>
            </el-table-column>
            <el-table-column label="车架号" align="center">
              <template #default="scope">
                <span>{{ scope.row.vin }}</span>
              </template>
            </el-table-column>
          </c-table-template>
        </div>
      </c-main-template>

      <c-main-template
       class="mt-lg"
        minHeight="auto"
        title="提车信息"
        :isBreadcrumb="false"
        v-if="ruleForm?.buyerPickupApply?.pickupProofUrl"
      >
        <div class="mt-lg ml-lg mr-lg">
          <el-row>
            <el-col :span="8">
              <el-form-item label="提车地点：">
                {{ ruleForm.buyerPickupApply.pickupAddress }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="提车凭证：">
                <span
                  class="pointer c-blue"
                  @click="
                    onFileOpen(ruleForm?.buyerPickupApply?.pickupProofUrl)
                  "
                  >查看</span
                >
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </c-main-template>
    </el-form>
  </div>
</template>
<script setup>
const k = ["brand", "series", "model"];
import { ref, onMounted, getCurrentInstance } from "vue";
import { onFileOpen } from "@/utils/index.js";
import { deepClone } from "@/utils/index.js";
import { useRoute } from "vue-router";
const { proxy } = getCurrentInstance();
const ruleForm = ref({});
const route = useRoute();
const loading = ref(false);
onMounted(() => getById());
const getById = async () => {
  const url = "/buyerPickupApply/getById";
  const params = route.query;
  if (params.id) {
    loading.value = true;
    const res = await proxy.$get({ url, params });
    ruleForm.value = deepClone(res);
    loading.value = false;
  }
};
</script>